<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <template slot="header">
      <span>{{ title }}</span>
    </template>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      :label-position="'left'"
      label-width="100px"
    >
      <el-form-item label="文章标题:" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody">
        <quill-editor
          :value.sync="form.articleBody"
          :options="editorOption"
          ref="editor"
        >
        </quill-editor>
      </el-form-item>
      <el-form-item label="视频地址">
        <el-input v-model="form.videoURL" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="text" @click="close">取 消</el-button>
      <el-button type="primary" @click="submit(form)">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import quillEditor from '../components/ql-editor.vue'
import { add, update } from '../../api/hmmm/articles'

export default {
  components: {
    quillEditor
  },

  props: {
    title: {
      type: String,
      default: '提示'
    },
    flag: {
      type: Boolean,
      default: false
    },
    dialogobj: {
      type: Object,
      default: null
    }
  },
  watch: {
    flag (newval) {
      //
      this.dialogVisible = newval
    },
    dialogobj (newval) {
      //
      this.form = newval
      this.$nextTick(() => {
        this.$refs.editor.$refs.editor.quill.enable(true)
        this.$refs.editor.$refs.editor.quill.blur()
      })
    }
  },
  data () {
    return {
      dialogVisible: false,
      form: {
        id: null,
        title: '',
        articleBody: '',
        videoURL: null
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },

      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [
              {
                size: [
                  '12',
                  '14',
                  '16',
                  '18',
                  '20',
                  '22',
                  '24',
                  '28',
                  '32',
                  '36'
                ]
              }
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      }
    }
  },
  methods: {
    // 其他关闭
    handleClose (done) {
      done()
      this.$emit('confirm')
      this.form = this.$options.data().form
      this.$refs.form.resetFields()
    },
    open () {
      this.dialogVisible = true
    },
    // 关闭
    close () {
      this.dialogVisible = false
      this.$emit('confirm')
    },
    // 提交
    async handleConfirm (obj) {
      if (obj.id === null) {
        await add(obj)
      } else {
        await update({
          id: obj.id,
          title: obj.title,
          articleBody: obj.articleBody,
          videoURL: obj.videoURL
        })
      }
      this.form = this.$options.data().form
      this.$refs.form.resetFields()
      this.dialogVisible = false
      this.$emit('confirm')
    },
    // 提交校验
    submit (obj) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleConfirm(obj)
        } else {
          this.$message({
            message: '选项填写完整',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.ql-editor) {
  height: 235px;
}
</style>
